<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="active"><a data-toggle="tab" href="#search">Search</a></li>
                </ul>
                <div class="tab-content">
                    <div id="search" class="tab-pane active">
                        <div class="panel-body">
                                <div class="ibox-title"  style="border: none;"><h5 style="color: #00afef"><i>Search</i></h5>
                                </div>
                                <div class="ibox-content">
                                    <form class="form-horizontal" id="search_role_form">
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label">Name</label>
                                            <div class="col-lg-5">
                                                <input type="text" class="form-control" name="role_name_s">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label">Description</label>
                                            <div class="col-lg-5">
                                                <input type="text" class="form-control" name="role_description_s">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label"></label>
                                            <div class="col-lg-5">
                                                <a href="javascript:document.getElementById('search_role_form').reset();" class="btn btn-warning btn-md pull-right m-t-n-xs clear-btn" id="search-form"> Clear</a>
                                                <button class="btn btn-primary btn-md pull-right m-t-n-xs search-btn btn-margin-right" id="search-role-btn"> Search</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                    <button id="btn-add-role" type="button" class="btn btn-success m-t-n-xs btn-md add-tab-btn"> Add</button>
                                <div class="ibox-content">
                                    <table class="dataTables table table-bordered table-hover table-compact">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Description</th>
                                                <th class="no-sort">Enable</th>
                                                <th class="no-sort" style="padding:8px;text-align:center;width:75px;">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="role_result">
                                        </tbody>
                                    </table>
                                </div>
                            </div><!-- END of iBox -->
                    </div>
                </div><!-- END of TAB content -->
            </div><!-- END of TABs -->
        </div> <!-- END col -->
    </div><!-- END of class row-->
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Add Form Detail</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" id="role-dtl-form-2">
            <div class="form-group">
                <label class="col-lg-2 control-label">Form</label>
                <div class="col-lg-7">
                    <div class="input-group">
                        <select name="form_name_a" data-placeholder="Select Form" class="chosen-select">
                            <?php foreach ($forms as $key): ?>
                                <option value="<?php echo $key->form_id; ?>"><?php echo $key->form_name; ?> </option>
                            <?php endforeach;?>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-inline form-group" >
                <div><label class="col-lg-2 control-label">Create</label>
                    <div class="col-lg-1">
                        <input name="create_cb" type="checkbox" class="i-checks" checked>
                    </div>
                </div>
                <div><label class="col-lg-2 control-label">Delete</label>
                    <div class="col-lg-1">
                        <input name="delete_cb" type="checkbox" class="i-checks" checked>
                    </div>
                </div>
            </div>
            <div class="form-inline form-group" >
                <div><label class="col-lg-2 control-label">Update</label>
                    <div class="col-lg-1">
                        <input name="update_cb" type="checkbox" class="i-checks" checked>
                    </div>
                </div>
                <div><label class="col-lg-2 control-label">ReadOnly</label>
                    <div class="col-lg-1">
                        <input name="readonly_cb" type="checkbox" class="i-checks">
                    </div>
                </div>
                 <div><label class="col-lg-2 control-label">Enabled</label>
                    <div class="col-lg-1">
                        <input name="ena_cb" type="checkbox" class="i-checks" checked>
                    </div>
                </div>
            </div>
            <input type="hidden" name="role_id" id="role_id">
            <input type="hidden" name="form_id" id="form_id">
        </form>
      </div>
      <div class="modal-footer">
        <i id="loading_role_dtl_btn_2" style="color: gray; display: none;" class="fa fa-spinner fa-spin fa-lg"></i>&nbsp;
        <button id="save_role_dtl_2" type="button" class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div> <!-- end-of-modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Add Form Detail</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" id="role-dtl-form">
            <div class="form-group">
                <label class="col-lg-2 control-label">Form</label>
                <div class="col-lg-7">
                    <div class="input-group">
                    	<select name="form_name_a" data-placeholder="Select Form" class="chosen-select">
	                        <?php foreach ($forms as $key): ?>
	                        	<option value="<?php echo $key->form_id; ?>"><?php echo $key->form_name; ?> </option>
	                        <?php endforeach;?>
	                	</select>
                    </div>
                </div>
            </div>
            <div class="form-inline form-group" >
                <div><label class="col-lg-2 control-label">Create</label>
                    <div class="col-lg-1">
                        <input name="create_cb" type="checkbox" class="i-checks" checked>
                    </div>
                </div>
                <div><label class="col-lg-2 control-label">Delete</label>
                    <div class="col-lg-1">
                        <input name="delete_cb" type="checkbox" class="i-checks" checked>
                    </div>
                </div>
            </div>
            <div class="form-inline form-group" >
                <div><label class="col-lg-2 control-label">Update</label>
                    <div class="col-lg-1">
                        <input name="update_cb" type="checkbox" class="i-checks" checked>
                    </div>
                </div>
                <div><label class="col-lg-2 control-label">ReadOnly</label>
                    <div class="col-lg-1">
                        <input name="readonly_cb" type="checkbox" class="i-checks">
                    </div>
                </div>
                 <div><label class="col-lg-2 control-label">Enabled</label>
                    <div class="col-lg-1">
                        <input name="ena_cb" type="checkbox" class="i-checks" checked>
                    </div>
                </div>
            </div>
            <input type="hidden" name="role_id" id="role_id">
            <input type="hidden" name="form_id" id="form_id">
        </form>
      </div>
      <div class="modal-footer">
        <i id="loading_role_dtl_btn" style="color: gray; display: none;" class="fa fa-spinner fa-spin fa-lg"></i>&nbsp;
        <button id="save_role_dtl" type="button" class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div> <!-- end-of-modal -->
<div class="modal fade" id="editroledtlmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Edit Role Detail</h4>
      </div>
      <div class="modal-body" id="edit_cb">
        <form class="form-horizontal" id="role-edit-dtl-form">
            <div class="form-group">
                <label class="col-lg-2 control-label">Form</label>
                <div class="col-lg-7">
                    <input readonly type="text" class="form-control" name="form_name_e">
                </div>
            </div>
            <div class="form-inline form-group" >
                <div>
                    <label class="col-lg-2 control-label">Create</label>
                        <div class="col-lg-1">
                            <input name="create_cb_e" checked type="checkbox" class="i-checks">
                        </div>
                    </div>
                    <div>
                    <label class="col-lg-2 control-label">Delete</label>
                    <div class="col-lg-1">
                        <input name="delete_cb_e" checked type="checkbox" class="i-checks">
                    </div>
                </div>
            </div>
            <div class="form-inline form-group" >
                <div>
                    <label class="col-lg-2 control-label">Update</label>
                    <div class="col-lg-1">
                        <input name="update_cb_e" checked type="checkbox" class="i-checks">
                    </div>
                </div>
                <div>
                <label class="col-lg-2 control-label">ReadOnly</label>
                <div class="col-lg-1">
                    <input name="readonly_cb_e" id="readonly_cb_e" type="checkbox" class="i-checks">
                </div>
            </div>
            <div>
                <label class="col-lg-2 control-label">Enabled</label>
                    <div class="col-lg-1">
                        <input name="ena_cb_e" checked type="checkbox" class="i-checks">
                    </div>
                </div>
            </div>
            <input type="hidden" name="role_id_e" id="role_id_e">
            <input type="hidden" name="form_id_e" id="form_id_e">
            </form>
      </div>
      <div class="modal-footer">
        <i id="loading_role_dtl_btn_edit" style="color: gray; display: none;" class="fa fa-spinner fa-spin fa-lg"></i>&nbsp;
        <button id="save_edit_role_dtl" type="button" class="btn btn-primary">Okay</button>
        <!-- <button type="button" class="btn btn-info" id="text-btn">Cancel</button> -->
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div> <!-- end-of-modal -->
<input type="hidden" id="count_add" value="0">
<input type="hidden" id="count_edit" value="0">
<input type="hidden" id="count_view" value="0">
<script>
    $(document).ready(function() {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
        $('.i-checks').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed check ', function(event){
            if(event.type ==="ifChecked"){
                $(this).trigger('click');
                $('input').iCheck('update');
                console.log('test');
            }
            if(event.type ==="ifUnchecked"){
                $(this).trigger('click');
                $('input').iCheck('update');
                console.log('test');
            }
            if(event.type ==="ifDisabled"){
                console.log($(this).attr('id')+'dis');
                $('input').iCheck('update');
            }
        }).iCheck({
            checkboxClass: 'icheckbox_minimal-green',
            radioClass: 'iradio_minimal-green'
                //increaseArea: '20%'
        });
        $('input').iCheck();
        $('#text-btn').click(function(event) {
            /* Act on the event */
             //$('input').iCheck('update');
            alert($('input[name=readonly_cb_e]').is(':checked'));
        });
        //localStorage.clear();
    	$('#tab-list-2').on('click','#close-add-body',function(){
            var tabId = $(this).parents('li').children('a').attr('href');
            $(this).parents('li').remove('li');
            $(tabId).remove();
            $('#tab-list-2 a:first').tab('show');
            if(tabId == "#view"){
                $('#count_view').val('0');
            }else if(tabId == "#edit"){
                $('#count_edit').val('0');
                //localStorage.clear();
            }else{
                $('#count_add').val('0');
                //localStorage.clear();
            }
        });

        $(".chosen-select").chosen({width: "300px"});

        $(document).on('click','#role_dtl_modal',function(){
            if(typeof(localStorage.role_id) == 'undefined' || localStorage.role_id == ''){
                $('#myModal').modal('hide');
                notifymsg('danger','<b>Error</b>: Create a New Role First.');
            }else{
                $('#role_id').val(localStorage.role_id);
                $('#myModal').modal('show');
                notifymsg('hide','hide');
            }
        });

        $(document).on('click','#role_dtl_modal2',function(){
            if(typeof(localStorage.role_id_e) == 'undefined' || localStorage.role_id_e == ''){
                $('#myModal2').modal('hide');
                notifymsg('danger','<b>Error</b>: Create a New Role First.');
            }else{
                $('#role-dtl-form-2 #role_id').val(localStorage.role_id);
                $('#myModal2').modal('show');
                notifymsg('hide','hide');
            }
        });

        $('#btn-add-role').click(function(e) {
            localStorage.role_id = '';
            if($('#count_add').val() == 0){
                $('#tab-list-2').append('<li id="add-link"><a href="#add" role="tab" data-toggle="tab">Add<button id="close-add-body" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="add"><div class="panel-body"><div id="add_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#add-link').show();
                $('#count_add').val('1');
            }
            $('#tab-list-2 a[href="#add"]').tab('show');
            $('#add_data').html('<div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div>');
            $("#add_data").load("<?php echo $this->session->userdata('forload') . '/add_form'; ?>");
        });

        $(document).on('click','.btn.btn-sm.btn-primary.btn-xs.btn-outline.edit-tab',function(){
            var roleid = $(this).attr('roleid');
            console.log(roleid);
            localStorage.role_id_e = roleid;
            if($('#count_edit').val() == 0){
                $('#tab-list-2').append('<li id="edit-link"><a href="#edit" role="tab" data-toggle="tab">Edit<button id="close-add-body" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="edit"><div class="panel-body"><div id="edit_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#edit-link').show();
                $('#count_edit').val('1');
            }
            $("#edit_data").load("<?php echo $this->session->userdata('forload') . '/edit_form/'; ?>"+ roleid,function(){
                getroledtledit(roleid);
            });
            $('#tab-list-2 a[href="#edit"]').tab('show');
            $('#role_id_e').val(roleid);
            $('#form_id_e').val($(this).closest('tr').children('#form_id_v').text());
        });

        $(document).on('click','.btn.btn-sm.btn-primary.btn-xs.btn-outline.view-tab',function(){
            var roleid = $(this).attr('roleid');
            localStorage.role_id_v = roleid;
            if($('#count_view').val() == 0){
                $('#tab-list-2').append('<li id="view-link"><a href="#view" role="tab" data-toggle="tab">view<button id="close-add-body" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="view"><div class="panel-body"><div id="view_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#view-link').show();
                $('#count_view').val('1');
            }
            $("#view_data").load("<?php echo $this->session->userdata('forload') . '/view_form/'; ?>" + roleid,function(){
                getroledtlview(roleid);
            });
            $('#tab-list-2 a[href="#view"]').tab('show');
        });

        $('#save_role_dtl').click(function(){
            var rid = $('#role-dtl-form #role_id').val();
            $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/addRoleDtl'); ?>",
                data: $('#role-dtl-form').serialize()+'&'+$.param({ 'role_id': localStorage.role_id }),
                dataType: 'json',
                success: function(e){
                    $('#loading_role_dtl_btn').hide();
                    $('#save_role_dtl').removeAttr('disabled');
                    if(e[0].error == '1'){
                        notifymsg('danger','<b>Error</b>: '+e[0].msg);
                        //$('#myModal').modal('hide');
                        $('#save_role_dtl').removeAttr('disabled');
                    }else{
                        notifymsg('success','<b>Success</b>: Role Detail Save.');
                        $('#myModal').modal('hide');
                        $('#role-dtl-form')[0].reset();
                        getroledtl(localStorage.role_id);
                    }
                },
                beforeSend: function(){
                    $('#save_role_dtl').attr('disabled',true);
                    $('#loading_role_dtl_btn').show();
                }
            });
        });

        $('#save_role_dtl_2').click(function(){
            var rid = $('#role-dtl-form-2 #role_id').val();
            $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/addRoleDtl'); ?>",
                data: $('#role-dtl-form-2').serialize()+'&'+$.param({ 'role_id': localStorage.role_id_e }),
                dataType: 'json',
                success: function(e){
                    $('#save_role_dtl_2').removeAttr('disabled');
                    $('#loading_role_dtl_btn_2').hide();
                    if(e[0].error == '1'){
                        notifymsg('danger','<b>Error</b>: '+e[0].msg);
                        // $('#myModal').modal('hide');
                         $('#save_role_dtl_2').removeAttr('disabled');
                    }else{
                        notifymsg('success','<b>Success</b>: Role Detail Save.');
                        $('#myModal2').modal('hide');
                        $('#role-dtl-form')[0].reset();
                        getroledtledit(localStorage.role_id_e);
                    }
                },
                beforeSend: function(){
                    $('#save_role_dtl_2').attr('disabled',true);
                    $('#loading_role_dtl_btn_2').show();
                }
            });
        });
        var tab = 0;
        $('#search-role-btn').click(function(e){
            e.preventDefault();
            if(tab == 1){
              $('.dataTables').dataTable().fnDestroy();
            }
            $('#role_result').html('');
            $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/searchRole'); ?>",
                data: $('#search_role_form').serialize(),
                dataType: 'json',
                success: function(e){
                $('#role_result').html('');
                if(e == 'No results found.'){
                    $('#role_result').append("<tr><td colspan='4' align='center'><h3>No Result Found</h3></td></tr>");
                    notifymsg('success','<b>Success</b>: 0 result(s) found.');
                }else{
                    var count = 0;
                    var trHTML = '';
                    $.each(e, function(i, item) {
                        var cb_state = "hover";
                        if(e[i].enable_flag == "Y"){
                            cb_state = "checked";
                        }
                        trHTML += '<tr style="line-height:1;padding:2px;"><td id="role_name_r">'+ e[i].role_name +'</td><td id="role_desc_r">'+ e[i].description +'</td><td align="center"><div style="cursor: default;" class="state icheckbox_square-green '+cb_state+'"></div></td><td align="center"><button roleid="'+ e[i].role_id +'" type="button" class="btn btn-sm btn-primary btn-xs btn-outline edit-tab" data-toggle="tab" href="#add-2" title="Edit"><i class="fa fa-pencil-square-o fa-lg"></i></button><button roleid="'+ e[i].role_id +'" type="button" class="btn btn-outline btn-sm btn-primary btn-xs view-tab" data-toggle="tab" role="tab" href="#view" title="VIew"><i class="fa fa-file-text-o fa-lg"></i></button></td></tr>';
                        count++;
                    });
                    $('#role_result').append(trHTML);
                    notifymsg('success','<b>Success</b>: ' +count+' result(s) found.');
                    tab = 1;
                    $('.dataTables').DataTable( {
                      "order": [[ 1, "desc" ]],
                      "columnDefs": [ {
                        "targets": 'no-sort',
                        "orderable": false,
                        } ],
                        "sDom": 'ltipf'
                    });
                }
                },
                beforeSend: function(){
                    $('#search-role-btn').prop('disabled', true);
                    $('#role_result').append("<tr><i class='fa fa-spinner fa-spin'></i></td></tr>");
                    $('#loading-icon').addClass('fa-spin');
                },
                complete: function(){
                    $('#search-role-btn').prop('disabled', false);
                    $('#loading-icon').removeClass('fa-spin');
                }
            });
        });

         var tab = 0;
        var tab1 = 0;

        function getroledtledit(id){
             //console.log(localStorage.role_id);
             if(tab1 == 1){
              $('.dataTables').dataTable().fnDestroy();
            }
             $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/getRoleDtl'); ?>",
                data: { 'role_id': id },
                dataType: 'json',
                success: function(e){
                    var tmp = '';
                    var checked = '';
                    $.each(e, function(i, item) {
                        var ac_val = 'hover'; var au_val = 'hover'; var ad_val = 'hover'; var aro_val = 'hover'; var e_flag = 'hover';
                        console.log(e[i].allow_create + ' ' +e[i].allow_update + ' ' + e[i].allow_delete + ' ' + e[i].read_only + ' ' + e[i].enable_flag);
                        if(e[i].allow_create == "Y"){
                            ac_val = "checked";
                        }
                        if(e[i].allow_update == "Y"){
                            au_val = "checked";
                        }
                        if(e[i].allow_delete == "Y"){
                            ad_val = "checked";
                        }
                        if(e[i].read_only == "Y"){
                            aro_val = "checked";
                        }
                        if(e[i].enable_flag == "Y"){
                            e_flag = "checked";
                        }
                        tmp += "<tr><td style='display:none;' id='enable_flag_v'>"+ e[i].enable_flag +"</td><td style='display:none;' id='read_only_v'>"+ e[i].read_only +"</td><td style='display:none;' id='allow_delete_v'>"+ e[i].allow_delete +"</td><td style='display:none;' id='allow_update_v'>"+ e[i].allow_update +"</td><td style='display:none;' id='allow_create_v'>"+ e[i].allow_create +"</td><td style='display:none;' id='form_id_v'>"+ e[i].form_id +"</td><td style='display:none;' id='role-id_v'>"+ e[i].role_id +"</td><td id='form_name_v'>" + e[i].form_name +'</td><td id="module_code_v">' + e[i].module_code +'</td><td align="center"><div style="cursor: default;" class="state icheckbox_square-green '+ ac_val +'"></div></td><td align="center"><div style="cursor: default;" class="state icheckbox_square-green '+ au_val +'"></div></td><td align="center"><div style="cursor: default;" class="state icheckbox_square-green '+ ad_val +'"></div></td><td align="center"><div style="cursor: default;" class="state icheckbox_square-green '+ aro_val +'"></div></td><td align="center"><div style="cursor: default;" class="state icheckbox_square-green '+ e_flag +'"></div></td><td align="center"><button type="button" class="btn btn-primary btn-outline btn-sm btn-xs edit"><i class="fa fa-pencil fa-fw"></i></button> <button type="button" class="btn btn-primary btn-outline btn-sm btn-xs delete" title="Delete Role Detail"><i class="fa fa-trash-o fa-fw"></i></button></td></tr>';
                    });
                    $('#role-dtl-tbl-edit').html(tmp);
                     tab1 = 1;
                        $('.dataTables2').DataTable( {
                            "order": [[ 1, "desc" ]],
                            "columnDefs": [ {
                              "targets": 'no-sort',
                              "orderable": false,
                              } ],
                              "sDom": 'ltipf'
                          });
                    getroledtlview(id);
                },
                beforeSend: function(){
                    $('#role-dtl-tbl-edit').html('<div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div>');
                }
            });
        }

        function getroledtl(id){
            if(tab == 1){
              $('.dataTables1').dataTable().fnDestroy();
            }
             console.log(localStorage.role_id);
             $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/getRoleDtl'); ?>",
                data: { 'role_id': id },
                dataType: 'json',
                success: function(e){
                    var tmp = '';
                    var checked = '';
                    $.each(e, function(i, item) {
                        var ac_val = 'hover'; var au_val = 'hover'; var ad_val = 'hover'; var aro_val = 'hover'; var e_flag = 'hover';
                        console.log(e[i].allow_create + ' ' +e[i].allow_update + ' ' + e[i].allow_delete + ' ' + e[i].read_only + ' ' + e[i].enable_flag);
                        if(e[i].allow_create == "Y"){
                            ac_val = "checked";
                        }
                        if(e[i].allow_update == "Y"){
                            au_val = "checked";
                        }
                        if(e[i].allow_delete == "Y"){
                            ad_val = "checked";
                        }
                        if(e[i].read_only == "Y"){
                            aro_val = "checked";
                        }
                        if(e[i].enable_flag == "Y"){
                            e_flag = "checked";
                        }
                        tmp += "<tr><td style='display:none;' id='enable_flag_v'>"+ e[i].enable_flag +"</td><td style='display:none;' id='read_only_v'>"+ e[i].read_only +"</td><td style='display:none;' id='allow_delete_v'>"+ e[i].allow_delete +"</td><td style='display:none;' id='allow_update_v'>"+ e[i].allow_update +"</td><td style='display:none;' id='allow_create_v'>"+ e[i].allow_create +"</td><td style='display:none;' id='form_id_v'>"+ e[i].form_id +"</td><td style='display:none;' id='role-id_v'>"+ e[i].role_id +"</td><td id='form_name_v'>" + e[i].form_name +'</td><td id="module_code_v">' + e[i].module_code +'</td><td align="center"><div style="cursor: default;" class="state icheckbox_square-green '+ ac_val +'"></div></td><td align="center"><div style="cursor: default;" class="state icheckbox_square-green '+ au_val +'"></div></td><td align="center"><div style="cursor: default;" class="state icheckbox_square-green '+ ad_val +'"></div></td><td align="center"><div style="cursor: default;" class="state icheckbox_square-green '+ aro_val +'"></div></td><td align="center"><div style="cursor: default;" class="state icheckbox_square-green '+ e_flag +'"></div></td></tr>';
                    });
                    $('#role-dtl-tbl').html(tmp);
                     tab = 1;
                        $('.dataTables').DataTable( {
                            "order": [[ 1, "desc" ]],
                            "columnDefs": [ {
                              "targets": 'no-sort',
                              "orderable": false,
                              } ],
                              "sDom": 'ltipf'
                          });
                },
                beforeSend: function(){
                    $('#role-dtl-tbl').html('<div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div>');
                }
            });
        }

        function getroledtlview(id){
           $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/getRoleDtl'); ?>",
                data: { 'role_id': id },
                dataType: 'json',
                success: function(e){
                    var tmp = '';
                    var checked = '';
                    $.each(e, function(i, item) {
                        var ac_val = 'hover'; var au_val = 'hover'; var ad_val = 'hover'; var aro_val = 'hover'; var e_flag = 'hover';
                        console.log(e[i].allow_create + ' ' +e[i].allow_update + ' ' + e[i].allow_delete + ' ' + e[i].read_only + ' ' + e[i].enable_flag);
                        if(e[i].allow_create == "Y"){
                            ac_val = "checked";
                        }
                        if(e[i].allow_update == "Y"){
                            au_val = "checked";
                        }
                        if(e[i].allow_delete == "Y"){
                            ad_val = "checked";
                        }
                        if(e[i].read_only == "Y"){
                            aro_val = "checked";
                        }
                        if(e[i].enable_flag == "Y"){
                            e_flag = "checked";
                        }
                        tmp += "<tr><td style='display:none;' id='enable_flag_v'>"+ e[i].enable_flag +"</td><td style='display:none;' id='read_only_v'>"+ e[i].read_only +"</td><td style='display:none;' id='allow_delete_v'>"+ e[i].allow_delete +"</td><td style='display:none;' id='allow_update_v'>"+ e[i].allow_update +"</td><td style='display:none;' id='allow_create_v'>"+ e[i].allow_create +"</td><td style='display:none;' id='form_id_v'>"+ e[i].form_id +"</td><td style='display:none;' id='role-id_v'>"+ e[i].role_id +"</td><td id='form_name_v'>" + e[i].form_name +'</td><td id="module_code_v">' + e[i].module_code +'</td><td><div style="cursor: default;" class="state icheckbox_square-green '+ ac_val +'"></div></td><td><div style="cursor: default;" class="state icheckbox_square-green '+ au_val +'"></div></td><td><div style="cursor: default;" class="state icheckbox_square-green '+ ad_val +'"></div></td><td><div style="cursor: default;" class="state icheckbox_square-green '+ aro_val +'"></div></td><td><div style="cursor: default;" class="state icheckbox_square-green '+ e_flag +'"></div></td></tr>';
                    });
                    $('#role-dtl-tbl-view').html(tmp);
                },
                beforeSend: function(){
                    $('#role-dtl-tbl-view').html('<div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div>');
                }
            });
        }
        $(document).on('click','.btn.btn-primary.btn-outline.btn-sm.btn-xs.edit',function(){
            //$('#edit_cb').html('');
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green'
            });
            var form_id_e      = $(this).closest('tr').children('#form_id_v').text();
            var role_id_e      = $(this).closest('tr').children('#role-id_v').text();
            var module_code_e  = $(this).closest('tr').children('#module_code_v').text();
            var form_name_e    = $(this).closest('tr').children('#form_name_v').text();
            var enable_flag_e  = $(this).closest('tr').children('#enable_flag_v').text();
            var allow_create_e = $(this).closest('tr').children('#allow_create_v').text();
            var allow_update_e = $(this).closest('tr').children('#allow_update_v').text();
            var allow_delete_e = $(this).closest('tr').children('#allow_delete_v').text();
            var read_only_e    = $(this).closest('tr').children('#read_only_v').text();
            $('input[name=form_name_e]').val(form_name_e);
            $('#role_id_e').val(role_id_e);
            $('#form_id_e').val(form_id_e);
            editcb(role_id_e,form_id_e);
            $('#editroledtlmodal').modal('show');
        });

        function editcb(roleid,formid){
            console.log(roleid);
           $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/getRoleCb'); ?>",
                data: { 'role_id': roleid,'form_id': formid },
                dataType: 'json',
                success: function(e){
                        if(e[0].allow_create == 'Y'){
                        console.log('create = ' + e[0].allow_create);
                            $('input[name=create_cb_e]').attr('checked',true);
                            $('input[name=create_cb_e]').iCheck('check');
                        }else{
                            $('input[name=create_cb_e]').removeAttr('checked');
                            $('input[name=create_cb_e]').iCheck('uncheck');
                        }
                        if(e[0].allow_update == 'Y'){
                            console.log('update = ' + e[0].allow_update);
                            $('input[name=update_cb_e]').attr('checked',true);
                            $('input[name=update_cb_e]').iCheck('check');
                        }else{
                            $('input[name=update_cb_e]').removeAttr('checked');
                            $('input[name=update_cb_e]').iCheck('uncheck');
                        }
                        if(e[0].allow_delete == 'Y'){
                            console.log('delete = ' + e[0].allow_delete);
                            $('input[name=delete_cb_e]').attr('checked',true);
                            $('input[name=delete_cb_e]').iCheck('check');
                        }else{
                            $('input[name=delete_cb_e]').removeAttr('checked');
                            $('input[name=delete_cb_e]').iCheck('uncheck');
                        }
                        if(e[0].read_only == 'Y'){
                            console.log('readonly = ' + e[0].read_only);
                            $('input[name=readonly_cb_e]').iCheck('check');
                            $('input[name=readonly_cb_e]').attr('checked',true);
                        }else{
                            $('input[name=readonly_cb_e]').removeAttr('checked');
                            $('input[name=readonly_cb_e]').iCheck('uncheck');
                        }
                        if(e[0].enable_flag == 'Y'){
                            console.log('readonly = ' + e[0].enable_flag);
                            $('input[name=ena_cb_e]').iCheck('check');
                            $('input[name=ena_cb_e]').attr('checked',true);
                        }else{
                            $('input[name=ena_cb_e]').removeAttr('checked');
                            $('input[name=ena_cb_e]').iCheck('uncheck');
                        }
                        $('input').iCheck('update');
                        //console.log(e[0].allow_create + ' ' +e[0].allow_update + ' ' + e[0].allow_delete + ' ' + e[0].read_only + ' ' + e[0].enable_flag);
                }
            });
        }
        /*$(document).on('click','#editroledtlmodal input[name=readonly_cb_e]',function(){
            if ($(this).prop("checked") == true){
                alert("checked");
                $('input[name=create_cb_e]').removeAttr('checked');
                $('input[name=update_cb_e]').removeAttr('checked');
                $('input[name=delete_cb_e]').removeAttr('checked');
                $('input[name=create_cb_e]').attr('disabled',true);
                $('input[name=update_cb_e]').attr('disabled',true);
                $('input[name=delete_cb_e]').attr('disabled',true);
                $('input').iCheck('update');
                console.log('Checked');
              } else {
                $('input[name=create_cb_e]').removeAttr('disabled');
                $('input[name=update_cb_e]').removeAttr('disabled');
                $('input[name=delete_cb_e]').removeAttr('disabled');
                $('input[name=create_cb_e]').attr('checked',true);
                $('input[name=update_cb_e]').attr('checked',true);
                $('input[name=delete_cb_e]').attr('checked',true);
                $('input').iCheck('update');
                console.log('Unchecked');
              }
        });*/

        $(document).on('click','.btn.btn-primary.btn-outline.btn-sm.btn-xs.delete',function(){
            var formid = $(this).closest('tr').children('#form_id_v').text();
            var roleid = $(this).closest('tr').children('#role-id_v').text();
            console.log(formid + ' ' + roleid);
            swal({
                title: "Are you sure?",
                text: "Data will be Lost!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel please!",
                closeOnConfirm: false,
                closeOnCancel: false },
            function (isConfirm) {
                if (isConfirm) {
                    swal("Deleted!", "Data is unrecovable", "success");
                    $.ajax({
                        type: "POST",
                        url: "<?php echo base_url($this->session->userdata('forajax') . '/delRoleDtl'); ?>",
                        data: { "role_id": roleid,"form_id": formid},
                        dataType: 'json',
                        success: function(e){
                            getroledtledit(roleid);
                        }
                    });
                } else {
                    swal("Cancelled",  "Action aborted", "error");
                }
            });
        });

        $('#save_edit_role_dtl').click(function(){
            console.log($('#role-edit-dtl-form').serialize());
            console.log($('#role_id_e').val());
            var rid = $('#role_id_e').val();
            $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/editRoleDtl'); ?>",
                data: $('#role-edit-dtl-form').serialize(),
                dataType: 'json',
                success: function(){
                    $('#editroledtlmodal').modal('hide');
                    getroledtledit(rid);
                },
                beforeSend: function(){
                    $('#loading_role_dtl_btn_edit').show();
                    $('#save_edit_role_dtl').attr('disabled',true);
                },
                complete: function(){
                    $('#save_edit_role_dtl').removeAttr('disabled');
                    $('#loading_role_dtl_btn_edit').hide();
                }
            });
        });
    });
</script>